<template>
  <q-page class="evaluate-page page">
    <div class="evaluate-page-bg"></div>
    <div class="evaluate-page-bg-color">
      <q-responsive :ratio="375 / 394">
        <div class="color-bg"></div>
      </q-responsive>
    </div>

    <section class="q-pa-md evaluate-page-content">
      <div class="center q-mt-xl q-pt-sm">
        <q-img src="~/assets/images/evaluate/img1.png" :ratio="452 / 338" width="150px" no-spinner no-transition />
      </div>

      <div class="text-center q-mt-md" style="font-weight: bold; font-size: 18px">
        {{ isFail ? '目前暂无匹配机构' : '机构匹配成功' }}
      </div>
      <div v-if="isFail" class="text-center q-mt-sm" style="color: #666666; font-size: 14px">
        请耐心等待更多机构匹配，<span style="color: #fe2f74">注意接听</span>机构来电
      </div>
      <div v-else class="text-center q-mt-sm" style="color: #666666; font-size: 14px">
        将立即与您电话联系，请<span style="color: #fe2f74">注意接听</span>
      </div>

      <div class="flex justify-center" v-if="appStore.pageType !== 'auth'">
        <q-btn :label="btnLabel" padding="none none" unelevated rounded :loading="submitLoading" @click="submit"
          class="q-mt-lg" style="
            background-color: #096aff;
            color: #fff;
            padding: 8px 40px !important;
            font-size: 15px;
            font-weight: 600;
          " />
      </div>

      <template v-if="apiBList.length && appStore.pageType !== 'auth'">
        <div class="q-mt-xl font-bold" style="font-size: 17px">匹配更多平台</div>
        <div class="list-content q-mt-sm">
          <div class="list-item q-pa-sm" v-for="(item, index) in apiBList" :key="index" :class="`bg${(index % 4) + 1}`"
            @click="submitAPIB(item)">
            <div class="flex items-center no-wrap">
              <div class="q-mr-xs" style="
                  width: 18px;
                  height: 18px;
                  border-radius: 99999px;
                  background-size: cover;
                  background-position: center;
                " :style="{ backgroundImage: `url(${item.companyLogo})` }"></div>
              <div class="flex-1 hide-scrollbar text-black" style="width: 50px; overflow-x: auto; white-space: nowrap">
                {{ item.companyName }}
              </div>
            </div>
            <div style="color: #999999; font-size: 12px" class="q-mt-sm">最高可借(元)</div>
            <div style="color: #222; font-size: 24px; font-weight: bold">
              {{ (+item.maxLoanAmount).toLocaleString() }}
            </div>
            <div style="color: #999999; font-size: 12px" class="q-mt-xs">年利率(单利)</div>
            <div class="font-DINAlternate" style="color: #ff1e4a; font-size: 15px; font-weight: bold">
              {{ +(+item.minRate).toFixed(2) }}%~{{ +(+item.maxRate).toFixed(2) }}%
            </div>

            <div class="q-mt-sm q-px-sm">
              <q-btn color="primary" padding="xs md" unelevated class="full-width" rounded style=""
                @click.stop="submitAPIB(item)" label="去申请" />
            </div>
          </div>
        </div>
      </template>
    </section>
  </q-page>
  <Protocol ref="ProtocolRef">
    <div style="margin: 10px;">
      <a href="https://file.whaoyong.com/20250208/60c226e5e7d04fd784742ec5d4e69812.html">《微好用注册协议》</a>
      <a href="https://file.whaoyong.com/20250210/40b36d5e4a364810be4c0ec1bc113f1d.html">《微好用隐私协议》</a>
      <a href="https://file.whaoyong.com/20250210/e46fa59830b84dcfa425c11bf02f956a.html">《微好用用户风险告知书》</a>
    </div>
  </Protocol>
</template>

<script setup lang="ts">
import Protocol from '../prodList/dialog/Protocol.vue';
import { ProtocolInstance } from '../prodList/dialog/Protocol';
import { useAppStore } from 'src/stores/app-store';
import BackHeader from 'src/components/BackHeader.vue';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { onUnmounted } from 'vue';
import { computed } from 'vue';
import { getApiBOrderItemClickApi, getApiBOrderListApi } from 'src/api/merchant';
import { APIBItem } from 'src/types/apib';
import { showLoadingToast } from 'vant';
import { prodInfoListApi } from 'src/api/prod';
import { gotoProd, ProdItem, ResType } from '../prodList/prodList';
import { openHome, openToChat } from 'src/hooks/zxfqapp_scheme';
import { useWxHook } from 'src/hooks/wx_hooks';

const router = useRouter();
const route = useRoute();

const appStore = useAppStore();
const ProtocolRef = ref<ProtocolInstance>();
const redirectUrl = computed(() => {
  return route.query.redirectUrl ? decodeURIComponent(route.query.redirectUrl as string) : undefined;
});

const btnLabel = computed(() => {
  if (useWxHook().isAnyirongMini()) {
    return '查看审核进度';
  }
  return '查看更多在线产品';
});

const isApp = computed(() => {
  return !!route.query.isApp;
});

const isFail = computed(() => {
  return !!route.query.isFail;
});

const isShow = computed(() => {
  return isApp.value || !!redirectUrl.value;
});

const time = ref(0);
let interval: number | undefined;
const runTime = () => {
  clearInterval(interval);
  interval = window.setInterval(() => {
    time.value--;
    if (time.value <= 0) {
      submit();
      clearInterval(interval);
    }
  }, 1000);
};
// runTime();
onUnmounted(() => {
  clearInterval(interval);
});

const submitLoading = ref(false);
const submit = async () => {
  const { pageType } = useAppStore();
  const { isAnyirongMini } = useWxHook();
  if (isAnyirongMini()) {
    if (useWxHook().isMiniprogram.value) {
      return useWxHook().toWxMiniGZH();
    }
    return router.replace({ path: '/wxfollow', query: route.query });
  }
  if (redirectUrl.value) {
    return window.open(redirectUrl.value, '_blank');
  }
  if (['auth_download', 'download'].includes(pageType)) {
    return router.replace({ path: '/down', query: route.query });
  }
  router.replace({ path: '/wxfollow', query: route.query });
};

const submitAPIB = async (item: APIBItem) => {
  const { infoId, orderItemId } = item;
  await getApiBOrderItemClickApi({ infoId, orderItemId });
  ProtocolRef.value?.show({
    companyTitle: item.companyName,
    orderItemId: item.orderItemId,
    companyName: item.companyName,
    approveFlag: 1,
    companySubTitle: item.companyName,
    companyShortName: '',
    approveUrl: item.approveUrl,
    infoType: '',
    companyLogo: item.companyLogo,
    maxLoanAmount: item.maxLoanAmount,
    maxRate: item.minRate,
    minRate: item.minRate,
    protocolUrl: item.htmlContent as string,

  });
  // location.href = item.approveUrl;
};

const prodList = ref<ProdItem[]>([]);
const isProdLoad = ref(false);
const initProdData = async () => {
  const res = await prodInfoListApi<ResType>({ sceneId: 3 });
  prodList.value = res.data.dataList;
  isProdLoad.value = true;
};

const apiBList = ref<APIBItem[]>([]);
const initData = async () => {
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
  });
  try {
    const res = await getApiBOrderListApi<{ dataList: APIBItem[] }>({});
    apiBList.value = res.data?.dataList ?? [];
  } catch (error) {
    console.error(error);
  }
  toast.close();
};

// initData()
</script>

<style lang="scss" scoped>
.evaluate-page {
  background-color: #e7f0fb;

  position: relative;

  .evaluate-page-bg {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url(src/assets/images/evaluate/bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0.6;
  }

  .evaluate-page-bg-color {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;

    .color-bg {
      background: linear-gradient(180deg, #d7eafd 0%, #f4f6f9 100%);
      opacity: 0.22;
    }
  }

  .evaluate-page-content {
    position: relative;
    z-index: 10;
  }
}

.prod-item {
  background-image: url(src/assets/images/prod/item-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 8px;
  overflow: hidden;

  .mark {
    background-image: url(src/assets/images/prod/mark.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 6px 24px 14px 12px;
  }

  .tag {
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: -2px;
    margin-bottom: 4px;
    color: #fe6c09;
    font-size: 12px;
    // white-space: nowrap;
    border: 1px solid rgba($color: #fe6c0b, $alpha: 0.4);
  }
}

.list-box {
  background: linear-gradient(180deg, #b1caff 0%, #ffffff 200px);
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #ffffff;
  margin: 16px 10px;
}

.list-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 8px;
}

.list-item {
  border: 1px solid #ffffff;
  border-radius: 8px;

  &.bg1 {
    background-color: #fdf9f1;
  }

  &.bg2 {
    background-color: #fff7f8;
  }

  &.bg3 {
    background-color: #ecf7fc;
  }

  &.bg4 {
    background-color: #eefdf6;
  }
}

.input-box {
  textarea {
    border: 1px solid #4461e2;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
  }
}
</style>
